<!-- 表单设计头部 -->
<template>
  <div class="set-up-form-header">
    <!-- <a-space class="space">
      <icon-arrow-left :size="32" @click="back" />
      <span v-if="!isEdit">未命名的表单</span>
      <a-input v-else placeholder="请输入表单名称"></a-input>
      <icon-edit :size="32" @click="edit" />
    </a-space> -->
    <a-tabs default-active-key="2">
      <a-tab-pane key="1" title="1 表单设计"> </a-tab-pane>
      <a-tab-pane key="2" title="2 打印配置"> </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script lang="ts" setup>
  import { reactive, ref } from 'vue';
  import { useRouter } from 'vue-router';

  const router = useRouter();

  // 返回按钮
  const back = () => router.back();
  let isEdit = ref(false); // 判断是否点击了编辑按钮

  //编辑按钮
  const edit = () => {
    isEdit.value = !isEdit.value;
  };
</script>

<style scoped lang="less">
  .set-up-form-header {
    // height: 50px;
    // width: 100%;
    // background-color: #4e7cf7;
    // line-height: 50px;
    // color: #fff;
    // font-size: 16px;

    :deep(.arco-tabs-nav-tab) {
      background-color: #4e7cf7;
      height: 50px;
      width: 100%;
      line-height: 50px;
    }
    :deep(.arco-tabs-nav-tab-list) {
      left: 50%;
      transform: translateX(-50%) !important;
    }
    :deep(.arco-tabs-nav-type-line .arco-tabs-tab) {
      color: #fff;
    }
    :deep(.arco-tabs-tab-active, .arco-tabs-tab-active:hover) {
      background-color: #2a64f6;
    }

    .space {
      vertical-align: middle;
      position: absolute;
      .btn {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        :deep(.arco-btn-text) {
          color: #fff;
          height: 50px;
        }
        :deep(.arco-btn-text:hover),
        :deep(.arco-btn-text:active) {
          background-color: #2a64f6;
        }
      }
    }
  }
</style>
